<template>
  <div>
    <el-dialog
      @closed="handleDialogClose"
      v-model="props.commodityOpen"
      :title="props.distinguish ? '规格信息' : '商品属性'"
      width="900px"
      append-to-body
    >
      <el-table
        :data="specificationList"
        height="500px"
        v-if="props.distinguish"
      >
        <el-table-column prop="skuKey" label="商品规格" />
        <el-table-column prop="price" label="售价" align="center" />
        <el-table-column prop="quantity" label="参考库存" align="center" />
      </el-table>
      <el-table :data="specificationList" height="500px" v-else>
        <el-table-column prop="attributeName" label="商品属性" />
        <el-table-column prop="attributeContent" label="属性值" />
      </el-table>
    </el-dialog>
  </div>
</template>
<script setup>
import { defineProps, defineEmits, watch } from "vue";
const emits = defineEmits(["handleDialogClose"]);
const specificationList = ref([]); //规格
const props = defineProps({
  // 区分
  distinguish: {
    type: Number,
    default: 1, //默认1是规格源数据，0是属性源数据
  },
  commodityOpen: {
    type: Boolean,
    default: false,
  },

  newList: {
    type: Object,
    default: {},
  },
});

watch(
  () => props.commodityOpen,
  () => {
    if (!props.commodityOpen) return;
    if (props.distinguish) {
      // 商品选项管理===》产品详情商品规格查看源数据
      product.productoptionline
        .productoptionlineGetbyid({
          pathParams: {
            id: props.newList.id,
          },
        })
        .then((res) => {
          specificationList.value = res.data.productDraftOptionSkuList;
          // console.log(res, "[[[[[]]]]]");
        });
    } else {
      // 商品属性管理===》产品详情商品属性查看源数据
      product.productattribute
        .productattributeGetbyid({
          pathParams: {
            id: props.newList.id,
          },
        })
        .then((res) => {
          specificationList.value = res.data;
        });
    }
  }
);
const handleDialogClose = () => {
  emits("handleDialogClose");
};
</script>
